<template>
  <div class="detail">
    <div
      class="single  mb-20"
      v-for="(item, index) in state.items"
      :key="index"
    >
      <div>
        <div class="flex align-center js-sp items">
          <div>{{ $currency(item.revenue) }} {{ state.currency }}</div>
          <div>{{ formatDate(item.create_time) }}</div>
        </div>
      </div>
    </div>

    <Norecord v-if="state.items.length === 0" />
    <div class="text-right">
      <el-pagination
        background
        small
        :current-page="state.currentpage"
        :page-size="state.assetsParam.limit"
        @current-change="pageChange"
        layout="prev, pager, next"
        :total="state.total"
        class="is-ltr"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
import Norecord from "@/components/noRecord/NoRecord.vue";
import { onMounted, reactive, watch } from "vue";
// import { useStore } from "vuex";
import { formatDate } from "@/utils/times.js";
import { useI18n } from "vue-i18n";

export default {
  name: "CurentCommin",
  props: { list: Array, currency: String, id: Number },
  components: { Norecord },
  setup(props) {
    // const $store = useStor
    const { t } = useI18n();
    const state = reactive({
      dialog: false,
      tableData: [],
      loading: false,
      total: 0,
      status: t("financial.all"),
      currentpage: 1,
      dialogVisible: false,
      assetsParam: {
        limit: 10,
        page: 0,
      },
      incomeList: props.list,
      items: [],
      currency: props.currency,
      id: props.id,
    });
    watch(props, (val) => {
      state.currentpage = 1;
      state.incomeList = [...val.list];
      state.total = state.incomeList?.length;
      pagination(state.currentpage, state.assetsParam.limit, state.incomeList);
    });
    onMounted(() => {
      state.total = 0;
      state.currentpage = 0;
      state.incomeList = [];
      state.items = [];
      state.id = 0;
    });

    // 分页
    const pageChange = (val) => {
      state.assetsParam.page = val - 1;
      state.currentpage = val;
      pagination(val, state.assetsParam.limit, state.incomeList);
    };
    const pagination = (pageNo, pageSize, array) => {
      let offset = (pageNo - 1) * pageSize;
      let list =
        offset + pageSize >= array.length
          ? array.slice(offset, array.length)
          : array.slice(offset, offset + pageSize);
      state.items = [...list];
    };
    const seeIncome = (val, currency) => {
      state.incomeList = [...val];
      state.dialogVisible = true;
      state.total = val?.length;
      state.currency = currency;
      pagination(state.currentpage, state.assetsParam.limit, state.incomeList);
    };
    return {
      state,
      pageChange,
      seeIncome,
      pagination,
      formatDate,
    };
  },
};
</script>

<style scoped lang="less">
.close-btn {
  width: 114px;
  height: 30px;
  line-height: 30px;
}
.mb-24 {
  margin-bottom: 24px;
}
.el-table__row .table-rowheight:last-child td {
  border-bottom: 1px solid #fff;
}
.pb-dialog {
  padding: 14px 20px;
  .dialog-title {
    color: #989898;
    font-size: 12px;
    line-height: 17px;
    margin-bottom: 14px;
  }
  .items {
    font-weight: bold;
    font-size: 12px;
    line-height: 15px;
    color: #424344;
    margin-bottom: 10px;
  }
}
</style>
